import { Component } from 'react'
import Header from '@/components/Header'
import Center from '@/components/Center'
import Footer from '@/components/Footer'
import styles from './index.less'

class Home extends Component {
  constructor(props: any) {
    super(props)
    this.state = {
      x: 0,
      y: 0,
      count: 0,
    }
  }
  move = (emojiDom: any) => {
    const innerR = 20 * 20
    const outerR = 25 * 25
    emojiDom.style.left = '80vw'
    emojiDom.style.top = '5vh'
    window.addEventListener('mousemove', (e) => {
      const rdX = Math.floor(Math.random() * 95)
      const rdY = Math.floor(Math.random() * 92)
      const circleX = Math.floor(emojiDom.offsetLeft + emojiDom.clientWidth / 2)
      const circleY = Math.floor(emojiDom.offsetTop + emojiDom.clientHeight / 2)
      const x = Math.abs(e.x - circleX)
      const y = Math.abs(e.y - circleY)
      if (x * x + y * y > innerR && x * x + y * y < outerR) {
        emojiDom.style.left = `${rdX}vw`
        emojiDom.style.top = `${rdY}vh`
      }
    })
  }
  componentDidMount() {
    this.move(document.getElementById('emoji'))
  }
  componentWillUnmount() {}

  render() {
    return (
      <div className={`${styles['home']}`}>
        <span
          id="emoji"
          onClick={(e) => {
            this.setState({
              count: 1,
            })
          }}
        >
          &#128518;
        </span>
        <Header />
        <Center />
        <Footer />
      </div>
    )
  }
}

export default Home
